{include file='common/_meta' /}
<style>
    table td .layui-table-cell,table th .layui-table-cell {
        padding: 0 5px;

    }
    .layui-table-view .layui-table{
        width:100%;
    }
	table{
		width:100%;
	}
    .layui-form .layui-form-label{
        padding: 0 5px;
        height: 30px;
        line-height: 28px;
        width: 25%;
        text-align: left
    }
    .layui-form .layui-btn{
        height: 30px;
        line-height: 28px
    }
    .layui-form .layui-inline{
        margin-top:5px
    }
    .layui-form .layui-input-inline{
        width: 70%;
    }
    .layui-form .layui-input-inline .layui-input,.layui-input-inline select{
        width: 100%;
        height: 30px
    }

</style>
<body>
<div class="container">
	<div class="layui-row">
        <div class="layui-col-xs12 layui-col-md12 breadcrumb">
    		<span class="layui-breadcrumb">
    			<a><cite>查询短信</cite></a>
    			<a><cite>发送查询</cite></a>
    			<a href="javascript:location.reload();">刷新</a>
    		</span>
        </div>
    </div>
    <div class="layui-col-xs12  layui-col-md12">
        <form class="layui-form" action="" id="form_s">
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
                <label class="layui-form-label">开始时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="create_time" id="stadate" value="{$configData.st}" placeholder="开始时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
                <label class="layui-form-label">结束时间:</label>
                <div class="layui-input-inline">
                    <input type="text" name="et" id="enddate" value="{$configData.et}" placeholder="结束时间" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
                <label class="layui-form-label">查询账号:</label>
                <div class="layui-input-inline">
                    <select name="channel_id" id="cha" lay-verify="" lay-search>
                        <option value="">全部</option>
                        {volist name="chas" id="c"}
                        <option value="{$c.channel_id}">{$c.company_name}-{$c.channel_id}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
                <label class="layui-form-label">国家:</label>
                <div class="layui-input-inline">
                    <select name="country" lay-verify="" lay-search>
                        <option value="">全部</option>
                        {volist name="countryData" id="p"}
                        <option value="{$p.country}">{$p.country} | {$p.en_country} | {$p.code}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
                <label class="layui-form-label">目标号码:</label>
                <div class="layui-input-inline">
                    <input type="tel" name="phone" id="hm" placeholder="目标号码" class="layui-input">
                </div>
            </div>
            <div class="layui-inline layui-col-xs12 layui-col-sm4 layui-col-md3">
            <button class="layui-btn layui-col-xs12 layui-col-sm4" lay-submit lay-filter="tou">立即搜索</button>
            </div>
        </form>
    </div>
	<div class="layui-col-xs12 layui-col-md12">
		<table class="layui-hide" id="initdate" lay-filter="datatable" lay-size="sm" style="width:100%"></table>
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <!-- <button class="layui-btn layui-btn-sm" lay-event="putout">导出订单</button> -->
                <button class="layui-btn layui-btn-sm" lay-event="putoutnum">导出号码</button>
            </div>
        </script>
	</div>
</div>
{include file="common/_footer"}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="{:$Think.config.__STATIC__}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">

layui.config({
    //配置 layui 第三方扩展组件存放的基础目录
    base: '/static/layui_exts/'
}).extend({
    xmSelect: 'xm-select/xm-select'
}).use(['table','laydate','form','xmSelect'], function(){
    var table    = layui.table;
    var layer    = layui.layer;
    var laydate  = layui.laydate;
    var form     = layui.form;
    var xmSelect = layui.xmSelect;

    //日期
    laydate.render({
        elem: '#stadate'
        ,type: 'datetime'
    });
    laydate.render({
        elem: '#enddate'
        ,type: 'datetime'
    });
    //表格
    table.render({
        elem: '#initdate',
        url:'{:url("index")}',
        cellMinWidth: 60,
        totalRow: true,
        toolbar: '#toolbarDemo',
        defaultToolbar: ['filter'],
        text: {
            none: '搜索到0条数据'
        },
        autoSort: false,
        method:'post',
        page:true,
        limit:20,
        cols: [[
                    {'field' : 'company_name', 'title' : '公司名称', 'width' : '100',templet:function(d){
                        return d.company_name+'/'+d.channel_id
                    }},
                    {'field' : 'create_time', 'title' : '下单时间', 'width' : '125'},
                    {'field' : 'phones', 'title' : '目标号码', 'width' : '80',templet:function(d){
                        return '<span style="color:blue" onclick="findPhone('+d.id+')">查看号码</span>'
                    }},
                    {'field' : 'channel_order_code', 'title' : '用户订单', 'width' : '80'},
                    {'field' : 'content', 'title' : '短信内容', 'width' : '200'},
                    {'field' : 'sms_numbers', 'title' : '占用', 'width' : '35', 'style' : 'text-align:center'},
                    {'field' : 'fee', 'title' : '消耗金额', 'width' : '80'},
                    {'field' : 'phone_numbers', 'title' : '号码总数', 'width' : '80', 'totalRow' : true},
                    {'field' : 'success_number', 'title' : '成功', 'width' : '80', 'totalRow' : true, 'style' : 'color:#5FB878;font-weight:700;',templet:function(d){
                        return d.success_number||0
                    }},
                    {'field' : 'error_number', 'title' : '失败', 'width' : '80',  'style' : 'color:#FF5722;font-weight:700;','totalRow' : true},
                    {'field' : 'response_orderId', 'title' : '平台订单', 'width' : '130'},
                    {'field' : 'sender_id', 'title' : 'Sender ID', 'width' : '130'}
                ]],
        size: 'sm',
        id: 'orderTable'
    });
    form.on('submit(tou)', function(data) {
        table.reload('orderTable', {
            page:{curr:1}//底下分页样式的开始页置为第一页
            ,where: data.field //设定异步数据接口的额外参数
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });
    //监听头工具栏事件
    table.on('toolbar(datatable)', function(obj){
        var checkStatus = table.checkStatus(obj.config.id);

        switch(obj.event)
        {
            case 'putout':

                var field = [];

                table.eachCols('orderTable', function (index, item) {
                    // console.log(item.hide);
                    if(!item.hide){
                        // console.log(item.field);
                        field.push(item.field);
                    }
                });

                download_file(btoa(field.join(",")));
                break;
            case 'putoutnum':

                // if(usertype == 'admin')
                // {
                //     if($("#cha").val() == '')
                //     {
                //         layer.alert('请选择查询账号', {icon: 2});
                //         return false;
                //     }
                // }

                var xmSelect1;
                layer.open({
                    type: 1,
                    title: '导出号码',
                    area:['360px','360px'],
                    btn: ['立刻导出', '取消'],
                    content: '<div class="layui-col-xs12" style="padding:10px"><p>温馨提示：导出订单数量或者时间范围建议不要过大，否则可能会导致下载时间长或者下载中断;<br /><br /></p><select name="order_phone_code" id="" style="width: 100%; padding: 8px; border: 1px solid #ccc;"><option value="">全部状态</option><option value="5">成功</option><option value="6">失败</option></select><p>可选择选择需要的列:</p><div id="xmSelect1" class="xm-select-demo-alert"></div></div>',
                    success: function(layero, index){
                        //渲染多选
                        xmSelect1 = xmSelect.render({
                            el: '#xmSelect1',
                            name: 'fieldname',
                            autoRow: true,
                            data: [
                                {name: '手机号码', value: 'phone', selected: true},
                                {name: '发送内容', value: 'content', selected: true},
                                {name: '号码状态', value: 'status', selected: true},
                                {name: '国家', value: 'country', selected: true},
                                {name: '错误', value: 'msg', selected: true},
                                {name: '下单时间', value: 'create_time', selected: true},
                            ]
                        })
                    },
                    yes: function(index){
                        if($("#hm").val() != '')
                        {
                            layer.alert('不能填写目标号码', {icon: 2});
                            return false;
                        }

                        var fieldname = $('input[name=fieldname]').val()

                        if(!fieldname){
                            layer.alert('最少选择一项', {icon: 2});
                            return false;
                        }

                        var field = btoa(fieldname)

                        var str=$("#form_s").serialize();
                        window.open("putoutnum.html?"+str+'&pcode='+$('select[name=order_phone_code]').val()+'&field='+field);

                        layer.close(index)
                    }
                });
                break;
        };
    });

});
/*查看号码*/
function findPhone(id)
{
    var index = layer.open({
        type: 2,
        title: '目标号码',
        content: "{:url('Orders/find_phones')}?id="+id+"&phone="+$('#hm').val()+"&order=",
        area:['100%','100%'],
        anim: 2
    });
}
var usertype = '{:session('user_type')}';
var oneCha = '{:is_OneCha()}';
//导出订单
function download_file(field)
{
    layer.confirm('温馨提示：导出订单数量或者时间范围建议不要过长，否则可能会导致下载时间长或者下载中断',function(index){
        if(usertype == 'admin' || oneCha)
        {
            var hm = $("#hm").val();
            var cha = $("#cha").val();

            if(hm != '' && cha == '')
            {
                layer.alert('搜索目标号码请选择渠道', {icon: 2});
                return false;
            }
        }
        var str=$("#form_s").serialize();

        window.open("putout.html?"+str+'&field='+field);

        layer.close(index)
    })

}
/*通道订单*/
function plat_list(id,stime) {

    var index = layer.open({
        type: 2,
        title: '通道订单',
        content: "{:url('Orders/plat_list')}?id="+id+"&stime="+stime,
        area:['100%','100%'],
        anim: 2
    });
}

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
